<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>头部</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
       
        .logo {
            width: 80%;
            margin: auto;
            margin-top:20px;
            overflow: hidden;
        }

        .logoImg {
            width: 30%;
            float: left;
        }

        .logoImg img {
            width: 90%;
        }

        .logoSerch {
            float: left;
            width: 40%;
        }
        #input .inputColor{
            border:none;
            
            border:2px solid #4b943d;
        }
        #input .btnColor{
            color:#fff;
            border:none;
            border:1px solid #4b943d;
            background:#4b943d;
        }
        .logobtn{
            width:10%;
            height:33px;
            float: right;
            text-align: center;
            line-height: 33px;
            margin-left:30px;
            color:#737373;
            background:#f8f8f6;
            border:1px solid #e5e5e5;

        }
        .logoHost{
            font-size:12px;
            color: #999;

        }
        .logoHost span{
            margin-right:20px;
        }
        .sidar{
            width:100%;
            margin-top:20px;
            border-bottom:1px solid #999;

        }
        .sidar table{
            width:60%;
            margin-left:10%;
            margin-bottom: 10px;
            font-size:14px;
            color:#5d5d5d;
          
        }
        .sidar table tr{
            width:100%;
            

        }
        .sidar table tr th{
            width:10%;
            text-align: center;
            border-right:1px solid #999;
        }
        
    </style>
</head>

<body>
    <div id="main">
        <div class="topHerd">
            <div class="topLeft">
                <label> 所在城市:</label>
                <select name="" id="">
                    <option value="">
                        郑州市区
                    </option>
                </select>
            </div>
            <div class="topRight">
                <div class="topThree">
                    400-800-8820
                </div>
                <div class="rightTwo">
                    我是商家
                </div>
                <div class="rightTwo">
                    我的消息
                </div>
                <div class="rightTwo">
                    我的订单
                </div>
                <div class="rightOne">
                    你好:
                    <strong>
                        199999999999
                    </strong>
                    <span>
                        退出
                    </span>
                </div>
            </div>
        </div>
        <div class="logo">
            <div class="logoImg">
                <img src="../img/img-JL/logo.png" alt="">
            </div>
            <div class="logoSerch">
                <div class="row ">
                    <div class="col-lg-12">
                        <div class="input-group" id="input">
                            <input type="text" class="form-control inputColor" placeholder="请输入关键字进行搜索">
                            <span class="input-group-btn">
                                <button class="btn btn-default btnColor" type="button">GO</button>
                            </span>
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div><!-- /.row -->
                <div class="logoHost">
                    <span>热门:</span>
                    <span>奇异果</span>
                    <span>牛排</span>
                    <span>山竹</span>
                    <span>牛油果</span>
                </div>
            </div>
            <div class="logobtn">
                <span></span>
                <strong>购物车</strong>
            </div>
            <div class="logobtn">
                <span></span>
                <strong>个人中心</strong>
            </div>
        </div>
        <div class="sidar">
            <table>
                <tr>
                    <th>全部分类</th>
                    <th>首页</th>
                    <th>同城</th>
                    <th>积分商城</th>
                    <th>礼拜五</th>
                    <th>导航 +</th>
                </tr>
            </table>
        </div>
        

       
    </div>
</body>

</html>